<template>
	<!-- 二手房详情页面 -->
	<view class="zufangdetail-content">
		<!--轮播图  -->
		<swiper class="swiper_content" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" circular="true">
			<swiper-item v-for="item in curZufangDetail.images" :key="item" >
				<view class="swiper-item">
					<image :src="item"></image>
				</view>
			</swiper-item>
		</swiper>
		<!--/轮播图  -->
		<view class="infotext-content">
			<!-- 房屋详细数据 -->
			<view class="houseinfo">
				<view class="infohead">
					<view class="infohead-left">
						<text class="price">{{curZufangDetail.price}}</text>元/月
					</view>
					<view class="interest" @click="changeinterest">
						<uni-icons v-if="!interest" type="heart" size="35"></uni-icons>
						<uni-icons v-else type="heart" size="35" color="red"></uni-icons>
						<text>{{interest?"取消":"关注"}}</text>
					</view>
				</view>
				<view class="info-other">
					<view class="">
						小区名：{{curZufangDetail.buildingName}}
					</view>
					<view class="">
						房型：{{type[curZufangDetail.type-1]}}
					</view>
					<view class="">
						建面：{{curZufangDetail.area}}m²
					</view>
					<view class="">
						装修：{{furnish[curZufangDetail.furnish-1]}}
					</view>
					<view class="">
						楼层：{{curZufangDetail.floor}}/共{{curZufangDetail.floors}}层
					</view>
					<view class="">
						朝向：{{curZufangDetail.toward}}
					</view>
					<view class="">
						出租方式：{{category[curZufangDetail.category-1]}}
					</view>
					
				</view>
			</view>
			<!-- 租金及付款方式 -->
			<view class="rentAndPay">
				<view class="sectiontitle">
					租金及付款方式
				</view>
				<view class="">
					付款方式：季付
				</view>
				<view class="">
					租金：{{curZufangDetail.price}}元/月
				</view>
				<view class="">
					押金：{{curZufangDetail.price}}元
				</view>
				<view class="">
					看房：随时看房
				</view>
			</view>
			<!-- 家具家电 -->
			<view class="furniture">
				<view class="sectiontitle">
					家具家电
				</view>
			</view>
			<!-- 在租信息 -->
			<view class="onsale">
				<view class="sectiontitle">该小区{{zufanglistInfo.length}}套在租</view>
				<view class="list-content">
					<view class="zufanglist-item" v-for="(item,index) in zufanglistInfo" :key="index">
						<home-houselist :itemdata="item" :selecthouse="2"></home-houselist>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部功能 -->
		<view class="footFunction">
			<detail-bottom :managerInfo="managerInfo"></detail-bottom>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(option) {
			this.currentId=option.id;
			this.getzufangDetail(option.id);
			this.getzufangData();//获取推荐新房数据
		},
		data() {
			return {
				currentId:"",//当前详情的id
				curZufangDetail:"",
				type:["一室一厅","两室一厅","三室一厅","四室两厅","五室两厅"],
				furnish:["清水","精装"],
				category:["整租","合租"],
				interest:false,//关注状态
				// 新房列表信息
				zufanglistInfo:[],
         managerInfo:{}
				
			}
		},
		methods: {
			//改变关注状态
			changeinterest(){
				this.interest=!this.interest;
			},
			async getzufangDetail(cur_id){
				const {data} =await uni.$http.get('/rental/one',{id:cur_id});
				this.curZufangDetail=data.data;
				// console.log("租房详情",this.curZufangDetail)
        if(this.curZufangDetail.contact) {
          this.managerInfo = {
            id:this.curZufangDetail.publisher,
            name:this.curZufangDetail.contact,
            mobile:this.curZufangDetail.tel,
            type:2
          } 
        }else {
             this.getManager(data.data.brokers[0])
          }
			},
			// 请求租房推荐数据
			async getzufangData(){
				const {data:res}=await uni.$http.get('/rental/page',{pageNo:1,pageSize:50,status:2,recommend:true});
				this.zufanglistInfo=res.data.records
				console.log("获取小区在租",this.zufanglistInfo)
			},
      // 获取经纪人信息
      async getManager(id) {
      const {data} =  await uni.$http.get('/broker/one',{id})
      this.managerInfo = data.data
         
       }
		}
	}
</script>

<style lang="scss" scoped>
	.zufangdetail-content{
		width: 100%;
		height: 100%;
		position: relative;
		background-color: #f4f5f4;
		.swiper_content{
			width: 100%;
			height: 360rpx;
			.swiper-item{
				width: 100%;
				height: 100%;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		.infotext-content{
			position: absolute;
			left: 0;
			top: 300rpx;
			width: 96%;
			margin: 0 2%;
			padding-bottom: 170rpx;
			.houseinfo{
				width: 94%;
				border-radius: 10rpx;
				background-color: #ffffff;
				padding: 20rpx 20rpx 20rpx 20rpx;
				.infohead{
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.infohead-left{
						font-size: 25rpx;
						color: #000000;
						font-weight: 400;
						.price{
							font-size: 40rpx;
							color: #fc0514;
							margin-right: 20rpx;
						}
					}
					.interest{
						margin-right: 20rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						color: #000000;
						image{
							width: 80rpx;
							height: 80rpx;
							margin-bottom: 10rpx;
						}
					}
				}
				
				.info-other{
					font-size: 25rpx;
					color: #000000;
					font-weight: 400;
					line-height: 45rpx;
				}
			}
			.rentAndPay{
				margin-top: 35rpx;
				width: 94%;
				border-radius: 10rpx;
				background-color: #ffffff;
				padding: 20rpx 20rpx 20rpx 20rpx;
				font-size: 25rpx;
				color: #000000;
				font-weight: 400;
				line-height: 45rpx;
				.sectiontitle{
					font-size: 40rpx;
					color: #000000;
					font-weight: 400;
					margin-bottom: 30rpx;
				}
			}
			.furniture{
				margin-top: 20rpx;
				width: 94%;
				border-radius: 10rpx;
				background-color: #ffffff;
				padding: 20rpx 20rpx 20rpx 20rpx;
				.sectiontitle{
					font-size: 40rpx;
					color: #000000;
					font-weight: 400;
					margin-bottom: 30rpx;
				}
			}
			.onsale{
				margin-top: 20rpx;
				width: 94%;
				border-radius: 10rpx;
				background-color: #ffffff;
				padding: 20rpx 20rpx 20rpx 20rpx;
				.sectiontitle{
					font-size: 40rpx;
					color: #000000;
					font-weight: 400;
					margin-bottom: 30rpx;
				}
				.list-content{
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					.zufanglist-item{
						width: 48%;
					}
				}
			}
		}	
		.footFunction{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 150rpx;
		}
	}
</style>
